<script setup lang="ts">
import { advisorConfigData } from "@/api/gta/advisor"
import { ElMessage } from 'element-plus'

/** 目的地列表 表单 */
defineOptions({ name: 'DestinationListForm' })

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单加载中：1）修改时的数据加载；2）提交的按钮禁用

/** 打开弹窗 */
const open = async (destinations: {id:string,name:string}[] & never[]) => {
  dialogVisible.value = true
  dialogTitle.value = '选择目的地（最多只能选择三个）'
  selectedTags.value = destinations
  console.log('destinations', destinations)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 选择目的地 */
const emit = defineEmits(['confirm'])

// 已选中的标签
const selectedTags = ref<{id:string,name:string}[] & never[]>([]);

// 切换标签选中状态
const toggleTag = (tag) => {
  const index = selectedTags.value.findIndex(item => item.id == tag.id);
  if (index != -1) {
    selectedTags.value.splice(index, 1); // 如果已选中，则取消选中
  } else {
    if (selectedTags.value.length == 3) {
      ElMessage.warning('最多只能选择三个目的地')
    } else {
      selectedTags.value.push(tag); // 如果未选中，则加入选中
    }
  }
};

// 删除选中标签
const removeTag = (tag) => {
  const index = selectedTags.value.indexOf(tag);
  if (index > -1) {
    selectedTags.value.splice(index, 1);
  }
};

// 确认选择
const handleConfirm = () => {
  console.log("已选择的标签：", selectedTags.value);
  emit('confirm', selectedTags.value)
  dialogVisible.value = false
  formLoading.value = false
};

</script>

<template>
  <Dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    v-loading="formLoading"
     :style="{ width: '700px' }"
  >
  <el-scrollbar max-height="60vh" always>
    <!-- 选中的目的地标签 -->
    <div v-if="selectedTags.length" class="selected-tags">
      <span>已选中标签：</span>
      <el-tag
        v-for="(tag, index) in selectedTags"
        :key="index"
        type="primary"
        closable
        @close="removeTag(tag)"
      >
        {{ tag.name }}
      </el-tag>
    </div>
    <div v-for="(group, groupindex) in advisorConfigData.DestinationInfoList" :key="groupindex" class="tag-group">
      <!-- 分组标题 -->
      <div class="group-title">{{ group.Name }}</div>
      <!-- 标签内容 -->
      <div class="tag-row">
        <div
          v-for="(tag, tagIndex) in group.DestList.filter(item => item.PoiId && item.PoiId!='0')"
          :key="tagIndex"
          class="tag-item"
        >
          <el-tag
            :type="selectedTags.some(item => item.id == tag.PoiId) ? 'primary' : 'info'"
            @click="toggleTag({id: tag.PoiId, name: tag.Value})"
            style="cursor: pointer;"
            class="tag"
          >
            {{ tag.Value }}
          </el-tag>
        </div>
      </div>
    </div>
  </el-scrollbar>
    <template #footer>
      <el-button type="primary" @click="handleConfirm()">确 定</el-button>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
    
  </Dialog>
</template>

<style scoped lang="scss">
/* 选中标签部分样式 */
.selected-tags {
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直方向居中对齐 */
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: bold;
}

.selected-tags span {
  margin-right: 10px; /* 控制与标签之间的间距 */
}

.selected-tags .el-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}

/* 分组部分样式 */
.group-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.tag-group {
  margin-bottom: 20px;
}

/* 标签行样式 */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 标签靠左排列 */
  margin-bottom: 10px;
}

.tag {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100%; /* 确保标签宽度占满容器 */
  height: 40px; /* 给标签固定高度，避免高度不一致 */
  cursor: pointer;
  text-align: center; /* 文字水平居中 */
  box-sizing: border-box;
}

.tag-content {
  margin-bottom: 10px;
}

.tag-item {
  flex: 0 0 33.33%; /* 每个标签占 1/3 宽度 */
  padding: 5px; /* 间距 */
  box-sizing: border-box; /* 确保 padding 不影响宽度 */
}

.destination-list-form {
  height: 80vh;
  overflow-y: auto;
}

</style>
